<template>
  <a-drawer
    :title="title"
    :width="800"
    :visible="modalListVisible"
    @ok="submitOk"
    @cancel="modalListVisible=false"
    cancelText="关闭"
  >

    <a-form :form="form">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item
            label="医生姓名"
            :required="true"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            validateStatus="success"
            hasFeedback
          >
            <a-input  v-model="doctor.name" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="性别" hasFeedback>
            <a-select v-model="doctor.sex">
              <a-select-option value="1">男</a-select-option>
              <a-select-option value="2">女</a-select-option>
            </a-select>

          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item
            label="身份证号"
            :required="true"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            hasFeedback
            validateStatus="success">

            <a-input v-model="doctor.idCard" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="所在地区"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="share"
            placeholder="Please select"
            change-on-select
          >
            <a-cascader :options="options" placeholder="地区区域" v-model="defaultPath" @change="onChange"></a-cascader>

          </a-form-item>
        </a-col>
      </a-row>


      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item
            label="医疗机构"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="share"
            required
            hasFeedback
          >
            <a-input  v-model.number="doctor.hospital" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="职称"
            hasFeedback
            validateStatus="warning"
          >
            <a-select v-model="doctor.title">
             <a-select-option value="教授">教授</a-select-option>
              <a-select-option value="主任医师">主任医师</a-select-option>
              <a-select-option value="副主任医师">副主任医师</a-select-option>
              <a-select-option value="主治医师">主治医师</a-select-option>
              <a-select-option value="医师">医师</a-select-option>

            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="头衔" hasFeedback>
            <a-select v-model="doctor.master">
              <a-select-option v-for="(item,index) in masterList" :value="item.value" :key="item.value" @click="selectItem1(item)">{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="科室" hasFeedback>
            <a-select v-model="doctor.departmentName">
              <a-select-option v-for="(item,index) in department" :value="item.id" :key="item.id" @click="selectItem(item)">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item  label="擅长" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-textarea :rows="2"  placeholder="..."  v-model="doctor.goodDesc"></a-textarea>
      </a-form-item>
      <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol"  label="个人标签">
        <a-col :span="24">
          <a-textarea :rows="2"  placeholder="..." v-model="doctor.introduction"></a-textarea>
        </a-col>
        <!-- <div style="display: flex;">
          <a-button type="primary" style="margin-left: 6px;width: 490px"  @click="showChildrenDrawer">请选择擅长</a-button>
        </div> -->
        <!-- <a-drawer
          title="擅长选择"
          width="720"
          :closable="false"
          :visible="modalVisible"
          @close="onChildrenDrawerClose"
        >
          <a-form-item>
            <div  ref="add">
              <slot name="item" :text="item.label" v-for="item in beGoodAt" style="font-size: 21px;color: #204c95">  {{  item.label }} :
                <div style="padding-left: 74px;white-space: normal;  word-break: break-all;display: flex;flex-wrap: wrap;">
                  <div v-for="v in item.children" style="font-size: 14px;padding-right: 10px;display: flex;flex-wrap: wrap;color: #6d6a6a">
                     <span v-if="doctor.good">
                       <input type="checkbox"  ref="data" class="selBtn" :data-id="v.value" :data-name="v.label" :checked="doctor.good.includes(v.value)">{{  v.label }}
                      </span>
                    <span v-else>
                       <input type="checkbox" :data-id="v.value" class="selBtn" :data-name="v.label">{{  v.label }}
                     </span>
                  </div>
                </div>
              </slot>
            </div>
          </a-form-item>
          <div
            :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }"
          >
            <a-button style="marginRight: 8px" @click="modalVisible =false">
              No
            </a-button>
            <a-button type="primary" @click="cole">
              OK
            </a-button>
          </div>
        </a-drawer> -->
      </a-form-item>

      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item  label="个人简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-textarea :rows="15"  placeholder="..." id="describe" v-model="doctor.introductionTitle"></a-textarea>
          </a-form-item>
        </a-col>
      </a-row>


    </a-form>
    <div
      :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }"
    >
      <a-button style="marginRight: 8px" @click="modalListVisible=false">
        No
      </a-button>
      <a-button type="primary" @click="submitOk">
        OK
      </a-button>
    </div>
  </a-drawer>

</template>

<script>
import { httpAction, getAction,putAction } from '@api/manage'
import JeecgDemoModal from '../../jeecg/modules/JeecgDemoModal'
import JSuperQuery from '@comp/jeecg/JSuperQuery'
import JeecgDemoTabsModal from '../../jeecg/modules/JeecgDemoTabsModal'
import JCheckbox from '@comp/jeecg/JCheckbox'
import JSelectPosition from '@comp/jeecgbiz/JSelectPosition'
import DoctorGoobModal from '@/views/doctor/modules/DoctorGoobModal'


import DoctorInfo from '@/views/doctor/DoctorInfo'
import DoctorIndexModal from '@/views/doctor/modules/DoctorIndexModal'


import { message } from 'ant-design-vue';
import Icons from '../../system/modules/icon/Icons'
import pick from 'lodash.pick'

export default {

  name: 'DoctorFormModal',
  inject: ['reload'],

  components: {
    JeecgDemoModal,
    JSuperQuery,
    JeecgDemoTabsModal,
    JCheckbox,
    JSelectPosition,
    DoctorIndexModal,
    DoctorInfo,
  },

  data() {
    return {
      title: '医生编辑',
      modalListVisible: false,
      modalVisible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      defaultPath:[ ],
      options: [
        {
          value: ' ',
          label: ' ',
          children: [
            {
              value: ' ',
              label: ' ',
            },
          ],
        },
      ],

      doctor:{},
      beGoodAt: [
        {
          value: ' ',
          label: ' ',
          children: [
            {
              value: ' ',
              label: ' ',
            },
          ],
        },
      ],
      idArray :[],
      department:[
        {
          id:'',
          img:'',
          name:'',
          parentId:'',
          sort:'',
        }
      ],
      departmentInfo:[],
      form: this.$form.createForm(this),
      url: {
        doctorEditInfo:  "/doctor/doctor/doctorEditInfo",
        department:"/doctor/doctor/department",
        goodInfo:"/doctor/doctor/goodInfo",
        cityTnfo:"/doctor/doctor/cityInfo",
        editSate:"/doctor/doctor/editSave"
      },
      masterList:[
        {value:0,name:'暂无'},
        {value:1,name:'国医大师'},
        {value:2,name:'全国名中医'},
        {value:3,name:'国家级名老中医'},
        {value:4,name:'市级名老中医'},
        {value:6,name:'首都国医名师'}
      ]
    }
  },
  created() {
    this.showDoctor();
    this.current = this.list[0].id;
    this.handleDoctorInfo(this.$route.params.id);
  },
  methods: {

    showDoctor(record) {
      let param = {};
      param.id = record.id;

      getAction(this.url.doctorEditInfo, param).then(res => {

        this.doctor = res.result;

        this.defaultPath[0] = res.result.provinceId;
        this.defaultPath[1] = res.result.cityId;
      })

      getAction(this.url.goodInfo, param).then(res => {
        this.beGoodAt = res.result;

      })
      getAction(this.url.department, param).then(res => {
        this.department = res.result;
        this.departmentInfo[0] = res.result.parentId;
        this.departmentInfo[1] = res.result.id;

      })

      getAction(this.url.cityTnfo, param).then(res => {

        this.options= res.result;
      })

      this.modalListVisible = true
    },

    selectItem(department){
      this.doctor.departmentId = department.id;
      this.doctor.departmentName = department.name;
    },
    selectItem1(department){
      this.doctor.master = department.value;
      console.log(22,this.doctor.master )
    },
    onChange(defaultPath){
      this.doctor.provinceId = defaultPath[0];
      this.doctor.cityId = defaultPath[1];
    },
    showChildrenDrawer() {
      this.modalVisible = true;
    },

    onChildrenDrawerClose() {
      this.modalVisible = false;
    },

    cole(){

      this.modalVisible = false;
    },

    submitOk () {

      // let checkDom = this.$refs.add.getElementsByClassName("selBtn");


      let idArray =[];
      // for(var i = 0 ; i<checkDom.length;i++ ){
      //   if(checkDom[i].checked){
      //     let  arrt = {
      //       subPosition: 0,
      //       parentPosition: 0,
      //       id:checkDom[i].dataset.id,
      //       name: checkDom[i].dataset.name,
      //     }
      //     idArray.push(arrt)
      //   }
      // }
      this.doctor.good =  JSON.stringify(idArray);

      putAction(this.url.editSate, this.doctor).then((res)=>{
        if(res){
          this.$message.success(res.message)
          this.reload()
        }else{
          this.$message.warning(res.message)
        }
      }).catch((error)=>{
        console.log(error);
      })

      this.modalListVisible = true;

    },


  }
}
</script>

<style lang="less" scoped>
  #components-a-popconfirm-demo-placement .ant-btn {
    width: 70px;
    text-align: center;
    padding: 0;
    margin-right: 8px;
    margin-bottom: 8px;
  };

</style>